<template>
    <el-row  >
        <el-col :span='20' :offset='2'>
            <!-- 页面上部分信息  企业信息-->
            <el-tabs  v-model="activetab_com">
                <el-tab-pane label="企业信息" name="com_info"></el-tab-pane>
            </el-tabs>
            <el-row>
                <el-col  :sm='16' :md='16' :lg='14'>
                    <el-form  label-width="180px"  :label-position="labelPosition"  align='left' size='small'  :model='form'>
                        <el-form-item label="企业名称："        prop='entName'>
                              {{form.entName}}
                        </el-form-item>
                        <el-form-item label="统一社会信用代码：" prop='creditCode'>
                              {{form.creditCode}}
                        </el-form-item>
                        <el-form-item label="注册资金："> 
                              {{form.regCapital  |  judgeAccount}}
                        </el-form-item>
                        <el-form-item label="注册地址：">
                              {{form.regAddr}}
                        </el-form-item>
                        <el-form-item label="法人名称：">
                              {{form.legalPersonName}}
                        </el-form-item>
                        <el-form-item label="法人身份证号码：" prop='ident'>
                              {{form.legalPersonIdc}}
                        </el-form-item>
                        <el-form-item label="税务信息：" class='mb10'>
                              （抬头）{{form.taxTitle}}
                        </el-form-item>
                        <el-form-item >
                              （税号）{{form.taxNo}}
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <!-- 页面下部分信息 基本信息、 账户 、文件 -->
            <el-tabs type="card" v-model='activetab_other'>
                  <!-- 基本信息 -->
                  <el-tab-pane label="基本信息" name='basic_info'>
                      <el-form  label-width="180px"  :label-position="labelPosition"  align='left' size='small' >
                          <el-form-item label="会员类型：">
                              {{form.entMemberType | entMember}}
                          </el-form-item>
                          <el-form-item label="企业联系人：">
                              <span  v-if='contect.length==0'>暂无</span>
                          </el-form-item>
                          <el-form-item  
                              v-for="(domain, index) in contect"
                              :label="'联系人' + (index+1) + '：'"
                              :key="index"
                              >
                              <span class='color-grey'>姓名：</span>{{domain.contactName}}
                              <span class='color-grey  ml10'>职务：</span>{{domain.position}}
                              <span class='color-grey  ml10'>联系电话：</span>{{domain.phone}}
                              <span class='color-grey  ml10'>邮箱：</span>{{domain.email}}
                          </el-form-item>
                      </el-form>
                  </el-tab-pane>
                  <!-- 账户 -->
                  <el-tab-pane label="银行账户" name='bank_info'>
                      <el-form  label-width="220px" align='left' size='small' >
                          <el-table
                            :data="bankList"
                            header-row-class-name='bankheader' 
                            style="width: 100%">
                                <el-table-column label="账户列表">
                                    <el-table-column  prop="accountName" label="账户名称"  align='center'></el-table-column>
                                    <el-table-column  prop='subbranchName' label="支行名称" align='center'></el-table-column>
                                    <el-table-column  prop='bankAccount' label="银行账号" align='center'></el-table-column>
                                </el-table-column>
                          </el-table>
                      </el-form>
                  </el-tab-pane>
                  <!-- 企业文件 -->
                  <el-tab-pane label="企业文件" name='file_info'>
                      <el-form  label-width="220px" align='left' size='small'  >
                          <el-table
                          :data="filelist"
                          header-row-class-name='bankheader'  align='left'  :cell-class-name='hover'   @cell-click='checkUser'
                          style="width: 100%"  
                          >
                              <el-table-column   prop="fileName"   label="文件名称"  align='center' ></el-table-column>
                              <el-table-column   label="操作" align='center'>
                                  <template v-slot="list">
                                      <el-button  type="primary" size="mini" round @click="downloadFile( list.row.fileCode)">下载</el-button>
                                  </template>
                              </el-table-column>
                          </el-table>
                      </el-form>
                  </el-tab-pane>
            </el-tabs>
        </el-col>
    </el-row>
</template>

<script>
/*interface*/
import { DetailCompany } from '@/api/company/index'
import { getpdfcode }  from '@/api/common/file'/*pdf文件预览*/

export default {
    name: 'com_detail',
    data () {
        return {
            /*static*/
            //tab active 值
            activetab_com:'com_info',
            activetab_other:'basic_info',
            //label对齐方式
            labelPosition:'right',
            /*active*/
            //企业信息form
            form:{
            },
            contect:[],
            //上传的银行账户列表
            bankList:[],
            //上传的文件列表 
            filelist:[],
        }
    },
    created() {
        //网页宽度判断，更改布局
        let clientWidth = document.body.clientWidth
        if(clientWidth<600){
            this.labelPosition='top'
        }
        //初始化页面
        let  code = this.$route.query.code
        this.pageInit(code)

    },
    methods:{
        /*初始化 获取企业信息 S*/
        pageInit(code){
            let that =this
            DetailCompany(code).then(response => {
                if(response.data.flag == true){
                    this.form = response.data.data.bizEnt
                    this.contect = response.data.data.bizEntContactList
                    this.bankList = response.data.data.bizEntBankList
                    this.filelist = response.data.data.bizEntFileList
                }
            })
            .catch(error => {

            })
        },
        /*初始化 获取企业信息 E*/

        /*表格操作 S*/
        hover({row, column, rowIndex, columnIndex}){
            //设置表格第一列的特殊样式  该样式需要在APP 或者 public.css设置
            if(columnIndex == 0 ){
                return 'activeCol  spaceNowrap'
            }
         },
        //点击表格第一列  查看详情
        checkUser(row, column, cell, event){
            if(column.label == '文件名称' ){
              /*预览文件*/ 
              let pdfStr = row.fileName.search(/pdf/ig)
              if(pdfStr !=-1){
                /*pdf文档*/
                window.open('download_file?fileCode='+row.fileCode+'&token='+sessionStorage.getItem('tokenId')+'&isRead=1')
              }
              else {
                //doc文档
                getpdfcode(row.fileCode)
              }
            }
        },
        /*表格操作 E*/
    },
    mounted(){
        this.$nextTick(function () {
            window.onresize = () => {
                if(document.body.clientWidth<600){
                    this.labelPosition = 'top'
                }
                if(document.body.clientWidth>=600){
                    this.labelPosition = 'right'
                }
            };
        })
    },
    components:{
    },

}
</script>


<style scoped>
  /*.com_account{width: 60%;}*/
  /*.com_connect{width: 21%; margin-top: 0;}*/
@media screen and (max-width: 1240px) {
/*    .com_account{width: 100%;}
    .com_connect{width: 33%;margin-top: 10px;}*/
}
</style>
